<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="clear" color="medium" (click)="dismiss()">
                <ion-icon name="close-outline" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>
            {{translate("MY_NFC_BOOK")}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">{{translate("MY_NFC_BOOK")}}</ion-title>
        </ion-toolbar>
    </ion-header>

    <div class="app-info ion-padding" *ngIf="tags && tags.length === 0">
        <h1>{{translate("NO_NFC_RECORD")}}</h1>
    </div>

    <ion-card class="card" *ngFor="let tag of tags" (click)="menu(tag)">
        <ion-card-header>
            <ion-card-subtitle>{{translate("TNF_INFO")}}: {{TNF[tag.tnf]}}</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
            {{translate("RAW_DATA")}}: {{parse(tag.payload)}}
            <br>{{translate("TYPE")}}: {{parse(tag.type)}}<br>
            <ngx-qrcode [value]="raw(tag)" errorCorrectionLevel="L"></ngx-qrcode>
        </ion-card-content>
    </ion-card>

</ion-content>